import 'package:flutter/material.dart';
import '../models/tag_model.dart';

/// 筛选标签组件 - Filter Chips Widget
/// 显示可选择的标签筛选器
class FilterChips extends StatelessWidget {
  final List<TagModel> allTags;
  final Set<String> selectedTags;
  final Function(String) onTagToggle;

  const FilterChips({
    super.key,
    required this.allTags,
    required this.selectedTags,
    required this.onTagToggle,
  });

  @override
  Widget build(BuildContext context) {
    if (allTags.isEmpty) {
      return const SizedBox.shrink();
    }

    return Container(
      height: 60,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题 - Title
          if (selectedTags.isNotEmpty)
            Padding(
              padding: const EdgeInsets.only(bottom: 8),
              child: Row(
                children: [
                  Text(
                    '筛选标签',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                      color: Colors.grey[600],
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  const SizedBox(width: 8),
                  Text(
                    '(${selectedTags.length})',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                      color: Colors.blue,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const Spacer(),
                  if (selectedTags.isNotEmpty)
                    GestureDetector(
                      onTap: () {
                        for (final tag in selectedTags.toList()) {
                          onTagToggle(tag);
                        }
                      },
                      child: Text(
                        '清除全部',
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: Colors.red,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                ],
              ),
            ),
          
          // 标签列表 - Tags List
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: allTags.length,
              itemBuilder: (context, index) {
                final tag = allTags[index];
                final isSelected = selectedTags.contains(tag.name);
                
                return Padding(
                  padding: EdgeInsets.only(
                    right: index < allTags.length - 1 ? 8 : 0,
                  ),
                  child: _buildFilterChip(context, tag, isSelected),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  /// 构建筛选标签 - Build Filter Chip
  Widget _buildFilterChip(BuildContext context, TagModel tag, bool isSelected) {
    // 统一标签样式，参考图二：浅色背景、细边框、圆角、紧凑间距
    const Color baseBg = Color(0xFFF1F5F9); // 浅灰背景
    const Color selectedBg = Color(0xFFE8F0FE); // 选中浅蓝背景
    const Color baseText = Color(0xFF334155); // 深灰文本
    const Color selectedText = Color(0xFF1E40AF); // 选中文本蓝
    const Color baseBorder = Color(0xFFE5E7EB); // 灰细边框
    const Color selectedBorder = Color(0xFFBFD5F5); // 选中细边框

    return FilterChip(
      label: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            tag.name,
            style: TextStyle(
              color: isSelected ? selectedText : baseText,
              fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
              fontSize: 13,
            ),
          ),
          if (tag.usageCount > 0) ...[
            const SizedBox(width: 4),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
              decoration: BoxDecoration(
                color: isSelected ? selectedText.withOpacity(0.08) : baseText.withOpacity(0.06),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                '${tag.usageCount}',
                style: TextStyle(
                  color: isSelected ? selectedText : baseText,
                  fontSize: 10,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ],
        ],
      ),
      selected: isSelected,
      onSelected: (_) => onTagToggle(tag.name),
      backgroundColor: baseBg,
      selectedColor: selectedBg,
      showCheckmark: false,
      side: BorderSide(
        color: isSelected ? selectedBorder : baseBorder,
        width: 1.0,
      ),
      elevation: 0,
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      visualDensity: const VisualDensity(horizontal: -2, vertical: -2),
      pressElevation: 0,
    );
  }
}